<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" class="dataForm">
      <el-row>
        <el-col :span="24">
          <div class="list-group-th">
            <div>{{ $t('展示') }}</div>
            <div>{{ $t('字段名称') }}</div>
            <div style="width:160px;text-align: center;">{{ $t('是否固定') }}</div>
            <div style="width:200px;text-align: center;">{{ $t('宽度') }}</div>
          </div>
          <draggable
            v-model="form.searchDefaultShowList"
            class="list-group"
            tag="ul"
            v-bind="dragOptions"
            @start="isDragging = true"
            @end="isDragging = false"
          >
            <transition-group type="transition" name="flip-list">
              <li
                v-for="(element, index) in form.searchDefaultShowList"
                v-show="element.fieldName !== '是否关注'"
                :key="index + new Date().getTime()"
                class="list-group-item"
              >
                <div class="bgWidth" :style="{'width':element.width + 'px'}" />
                <!-- <el-slider v-model="element.width" :max="1000" /> -->
                <i
                  :class="element.fixed ? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'"
                  aria-hidden="true"
                  @click="element.fixed = !element.fixed"
                />
                <div class="showList">
                  <div class="wid"><el-checkbox v-model="element.isShow" true-label="Y" false-label="N" /></div>
                  <div class="wid">{{ $t(element.fieldName) }}</div>
                  <div class="wid" style="width:160px;text-align: center;">
                    <el-switch
                      v-model="element.isFixed"
                      active-value="Y"
                      inactive-value="N"
                    />
                  </div>
                  <div class="wid" style="width:200px;text-align: center;"><el-input-number v-model="element.width" size="small" :min="80" :max="750" /></div>
                </div>
              </li>
            </transition-group>
          </draggable>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <el-button @click="cancel">{{ $t("取消") }}</el-button>
      <el-button type="primary" @click="submitForm">{{ $t("确定") }}</el-button>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import { getByViewId, saveShowFieldList } from '@/api/system/search/searchMainShow'
export default {
  name: 'FieldShow',
  components: { draggable },
  data() {
    return {
      loading: false,
      form: {
        searchDefaultShowList: []
      },
      isDragging: undefined
    }
  },
  computed: {
    dragOptions() {
      return {
        animation: 0,
        group: 'description',
        disabled: false,
        ghostClass: 'ghost'
      }
    }
  },

  methods: {
    getListById(id) {
      this.loading = true
      getByViewId(id).then(response => {
        this.form.searchDefaultShowList = response.data
        console.log(response.data, '字段展示')
        this.loading = false
      })
    },
    cancel() {
      this.$parent.$parent.fieldShow = false
      this.$parent.$parent.getList()
    },
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
            saveShowFieldList(this.form.searchDefaultShowList).then(response => {
                if (response.code === 200) {
                    this.msgSuccess(this.$t('保存成功'))
                    console.log(this)
                    this.$parent.$parent.fieldShow = false
                    this.$parent.$parent.getList()
                } else {
                    this.msgError(response.msg)
                }
            })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
